<template>
  <div id="div1">
    <ul>
      <li v-for="(item,i) in msgItem" :key="i" @click="()=>{$router.push({path:'/businessDetails',query:{id:item.id}})}">
        <img v-if="msgItem.length>0" style="width:100%" :src="item.storeLogo" alt />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data: () => ({
    oDiv: null,
    oUl: null,
    Li: null,
    speed: null,
    msgItem: []
  }),
  created() {
    this.$axios.notLoggedIn(`ym/mall-online-merchant/list`).then(msg => {
      msg.forEach(res => {
        this.msgItem.push(res);
      });
      setTimeout(() => {
        if (this.msgItem.length > 4) {
          this.oDiv = document.getElementById("div1");
          this.oUl = document.getElementsByTagName("ul")[0];
          this.Li = this.oUl.getElementsByTagName("li"); //获取ul下的所有li
          this.oUl.style.width = this.Li[0].offsetWidth * this.Li.length + "px"; //ul的宽度等于每个li的宽度乘以所有li的长度
          this.speed = 1;
          setInterval(this.move, 80);
        }
      }, 1000);
    });
  },
  watch: {},
  mounted() {},
  methods: {
    move() {
      //如果左边横向滚动了长度一半之后,回到初始位置
      if (this.oUl.offsetLeft < (-this.oUl.offsetWidth / this.speed) * 0.2) {
        this.oUl.style.left = "0";
      }
      //如果右边横向滚动的距离大于0 就让他的位置回到一半
      if (this.oUl.offsetLeft > 0) {
        this.oUl.style.left = -this.oUl.offsetWidth / this.speed + "px";
      }
      //oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动
      this.oUl.style.left = this.oUl.offsetLeft - this.speed + "px"; //进行右横向滚动
    }
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

#div1 {
  width: 100%;
  height: 110px;
  margin: 0 auto;
  position: relative;
}

#div1 ul {
  position: absolute;
  left: 0;
  top: 0;
}

#div1 ul li {
  display: inline-block;
  width: 100px;
  height: 100%;

  list-style: none;
}
#div1 ul li img {
  height: 110px;
  min-height: 140px;
}
</style>